<template>
  <div class="uinfo">
    <el-row>
      <el-col :span="8" :offset="0">
         <el-image class="uinfo_img" :src="timg" fit="fill" :lazy="true"></el-image>   
      </el-col>
      <el-col :span="16" :offset="0" class="uinfo_con">
        <div v-for="item in uinfo">
          <span :class="item.icon"></span><span>{{item.name}}</span>：<span>{{item.con}}</span>
        </div>
      </el-col>
    
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import { findBanner } from '../api/api'
import t from "@/assets/img/t.jpeg"
export default defineComponent({
  name: 'Uinfo',
  setup() {
     const timg = ref(t);
     const uinfo = ref([
       {
         icon:"el-icon-phone",
         name:"电话",
         con:"15923870940"
       },
       {
         icon:"el-icon-chat-dot-square",
         name:"qq",
         con:"2411923851"
       },
       {
         icon:"el-icon-message",
         name:"邮箱",
         con:"2411923851@qq.com"
       },
       {
         icon:"el-icon-s-custom",
         name:"职位",
         con:"web前端开发"
       },
     ])
     return {
       timg,
       uinfo
     }
  },
})
</script>
<style lang="scss" scoped>
   .uinfo{
     padding:0.2rem 0.1rem;
     background-color: white;
    //  background-image: url('../assets/img/bg.jpeg');
     background-repeat: repeat;
     background-size: 0.1rem 0.1rem;
    //  border-bottom: 1px solid rgb(216, 216, 223);
     .uinfo_img{
       width: 1.5rem;
       height: 1.5rem;
       border-radius: 50%;
       margin-top: 0.3rem;
       margin-left: 0.5rem;
     }
     .uinfo_con{
       margin-top: 0.1rem;
       border-left: 1px solid rgb(216, 216, 223);
       padding-left: 0.27rem;
       color: rgb(163, 155, 155);
       div{
         margin: 0.1rem 0;
         span:nth-child(1){
           color: #409EFF;
           margin: 0 0.15rem;
         }
       }
     }
   }
</style>
